<template lang="pug">
  .groupStatics
    el-radio-group.tabTypes(v-model="curTabKey" style="margin-bottom: 24px")
      el-radio-button(v-for="tab in tabs" :key="tab.key" :label="tab.key") {{tab.title}}
    garden-data-statics
    el-row(:gutter="20")
      el-col(:span="12")
        .panel
          h2 幼儿分布
          student-dist-echarts
      el-col(:span="12")
        .panel
          h2 教保师、教职工分布
          teacher-dist-echarts
</template>
<script>
import StudentDistEcharts from './components/studentDistEcharts'
import TeacherDistEcharts from './components/teacherDistEcharts'
import GardenDataStatics from './components/gardenDataStatics'

export default {
  components: {
    StudentDistEcharts,
    TeacherDistEcharts,
    GardenDataStatics
  },
  data () {
    return {
      curTabKey: '0',
      tabs: [
        { key: '0', title: '综合态势' },
        { key: '1', title: '综合详细' },
        { key: '2', title: '运营态势' },
        { key: '3', title: '健康态势' }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.panel{
  background: #FAFAFA;
  border-radius: 30px;
  padding: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;

  > h2 {
    padding-left: 20px;
    margin: 0;
    position: relative;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #6E645A;
    line-height: 72px;
    line-height: 20px;
    margin-bottom: 20px;

    &::before{
      content: '';
      display: block;
      position: absolute;
      width: 5px;
      height: 20px;
      border-radius: 3px;
      background: #6E645A;
      top: 0;
      left: 0;
    }
  }

}
</style>
